$(function() {
    var arr = []
        //  1 点击搜索进行页面跳转 search_list 并且 进行数据获取 而且需要携带参数 点击的时候把数据存储到本地缓存
        // 点击的时候
        // 1.1 获取输入框的数据
        // 1.2 把数据放到 arr =[] 数组里面   把arr 存储到本地缓存里面
        // 1.3  实现页面的跳转

    $('.searchBtn').on('click', function(e) {
            var txt = $('.searchIpt').val().trim()
            if (!txt) {
                mui.toast('请输入商品信息！');
                return
            }
            arr.unshift(txt)
            localStorage.setItem('searchHistory', JSON.stringify(arr))
            $('.searchIpt').val('')
            window.location.href = `./searchList.html?key=${txt}`
            e.preventDefault()
        })
        //  2 一进入页面会有历史记录展示  数据的存储
        // 保证每次都能把之前的值存到之前的空数组里面
    arr = JSON.parse(localStorage.getItem('searchHistory')) || []
    var obj = {
        data: arr
    }

    var historyList = template('searchTmp', obj)
    $('.list').html(historyList)

    //  3  点击清空 历史记录进行数据清除 然后重新渲染历史记录
    $('.clearHistory').on('click', function() {
        localStorage.removeItem('searchHistory')
        var newArr = JSON.parse(localStorage.getItem('searchHistory')) || []
        var obj = {
            data: newArr
        }

        var historyList = template('searchTmp', obj)
        $('.list').html(historyList)
    })
    $('.list').on('tap', 'li', function() {
        var txt = $(this).text()
        var text = encodeURI(txt)
        window.location.href = `./searchList.html?key=${text}`
    })
})